<template>
  <el-dialog
    class="dialog"
    v-model="dialogVisible"
    :width="isMobile ? '80%' : '30%'"
    destroy-on-close
    @close="close"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="btns">
        <div class="btn active">{{ modelData.introduce.title }}</div>
      </div>
    </template>
    <div class="content">{{  modelData.introduce.content }}</div>
  </el-dialog>
</template>

<script setup>
import modelDatas from '@/assets/json/model.json'

const dialogVisible = ref(false);
const route = useRoute();
const isMobile = inject("isMobile");
const modelData = modelDatas.model.find((i) => i.name == route.query?.name )
console.log("header", modelData);

const emit = defineEmits(["close"]);
const open = () => {
  dialogVisible.value = true;
};

const close = () => {
  dialogVisible.value = false;
  emit("close");
};

defineExpose({ open, close });
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%; /* 根据实际需求调整高度 */
  .text {
    margin-top: 10px;
  }
}
</style>
